<template>
    <div class="list">
        <van-checkbox v-model="shopCartList.checked" icon-size="25px" checked-color="#ee0a24"></van-checkbox>
        <van-swipe-cell>
            <van-card
                :num="shopCartList.num"
                :price="shopCartList.s_good.price"
                :desc="shopCartList.s_good.desc"
                :title="shopCartList.s_good.name"
                class="goods-card"
                :thumb="shopCartList.s_good.s_goods_photos[0].path"
                @click-thumb="goToDetail(shopCartList.goods_id)"
            >
                <template #num>
                    <van-stepper theme="round" button-size=".2rem" 
                    @change="changeNum({ num: shopCartList.num, id: shopCartList.id })" 
                    v-model="shopCartList.num" />
                </template>
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="handler(shopCartList.id)" />
            </template>
        </van-swipe-cell>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
defineProps({
    shopCartList: {
        type: Object
    }
});
const emits = defineEmits(['delShopCart', 'goToDetail', 'changeNum']);

const handler = id => {
    emits('delShopCart', id);
};

const goToDetail = id => {
    emits('goToDetail', id);
};

const changeNum = num => {
    emits('changeNum', num);
};
</script>

<style lang="scss" scoped>
.list {
    margin: 0 auto;
    position: relative;
    width: 339px;
    background-color: #fff;
    margin-top: 16px;
    padding: 16px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0rem 0.05rem 0.15rem;
    box-sizing: border-box;
    .delete-button {
        height: 100%;
    }
}

.van-checkbox {
    position: absolute;
    // top: -20px;
    top: 0;
    z-index: 2;
    left: 0;
}

.icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.3rem;
    height: 0.25rem;
    background: linear-gradient(to right, #ff6034, #ee0a24);
    border-radius: 0 50% 50% 0;
    font-size: 0.12rem;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
}
</style>
